<template>
  <div id="box">
    <span>担保物管理</span>
    <div class="box">
      <span>担保物信息</span>
      <div class="xinxi">
        <span>基本信息</span>
        <el-descriptions :mode1="from" class="margin-top" :column="3" border>
          <!-- 担保物编号 -->
          <el-descriptions-item>
            <template #label>担保物编号</template>
            <el-input v-model="from.dbwCollateralid" placeholder="数字" />
          </el-descriptions-item>
          <!-- 担保物类别 -->
          <el-descriptions-item>
            <template #label>担保物类别</template>
            <el-input v-model="from.dbwCollateraltype" />
          </el-descriptions-item>
          <!--  担保物名称-->
          <el-descriptions-item>
            <template #label>担保物名称</template>
            <el-input v-model="from.dbwCollateralname" />
          </el-descriptions-item>
          <!-- 所有权人 -->
          <el-descriptions-item>
            <template #label>所有权人</template>
            <el-input v-model="from.dbwOwer" />
          </el-descriptions-item>
          <!-- 权证签发机构 -->
          <el-descriptions-item>
            <template #label> 权证签发机构</template>
          </el-descriptions-item>
          <!-- 房产证编号 -->
          <el-descriptions-item>
            <template #label>房产证编号</template>
            <el-input v-model="from.dbwHoseid" />
          </el-descriptions-item>
          <!-- 座落 -->
          <el-descriptions-item>
            <template #label>座落</template>
            <el-input v-model="from.dbwAddress" />
          </el-descriptions-item>
          <!-- 面积 -->
          <el-descriptions-item>
            <template #label>面积</template>
            <el-input v-model="from.dbwArea" />
          </el-descriptions-item>
          <!-- 评估价值 -->
          <el-descriptions-item>
            <template #label>评估价值</template>
            <el-input v-model="from.dbwHowmoney" />
          </el-descriptions-item>
          <!--评估机构  -->
          <el-descriptions-item>
            <template #label>评估机构</template>
            <el-input v-model="from.dbwEvaluationbody" class="iput" />
          </el-descriptions-item>
        </el-descriptions>
        <!-- 附件 -->
        <div>
          <div class="fj">
            <span>申请附件</span>
            <el-button type="primary" class="but">打包下载</el-button>
          </div>
          <div class="fang">
            <span class="spans">附件1:房产证</span>
            <div class="fang1">
              <el-upload
                class="avatar-uploader"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"></el-icon>
              </el-upload>
            </div>
          </div>
        </div>
        <div id="but">
          <el-button class="btn" @click="tianjia" disabled>添加</el-button>
          <el-button type="primary" class="but" @click="fanhiu(fromref)"
            >返回</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { newdbwCollateral } from "../../../apis/Sltapi/DanBao";

const imageUrl = ref("");
var fromref = ref();
let router = useRouter();
var from = ref({
  dbwAddress: "" /* 座落 */,
  dbwApprovalstatus: "" /* 审批状态 */,
  dbwArea: "" /* 面积 */,
  dbwCollateralid: "" /* 担保物编号 */,
  dbwCollateralname: "" /* 担保物名称 */,
  dbwCollateraltype: "" /*  担保物类别*/,
  dbwEvaluationbody: "" /* 评估机构 */,
  dbwFiles: "" /* 附件 */,
  dbwHoseid: "" /* 房产证编号 */,
  dbwHowmoney: "" /* 价值 */,
  dbwOwer: "" /* 所有权人 */,
  // dbwWarrantissuers: "" /* 权证签发时间 */,
});
/* 返回 */
let fanhiu = () => {
  router.go(-1);
};

/* 添加 */
var tianjia = async () => {
  var res = await newdbwCollateral(from.value);
  // ElNotification.success({ message: "添加成功!" });
  // router.go(-1);
  console.log(res);
};
</script>

<style scoped>
.iput {
  width: 256px;
}
#box > span {
  display: block;
  width: 185px;
  height: 38px;
  background: #4eabfe;
  color: white;
  text-align: center;
  line-height: 38px;
  font-weight: 700;
  border-radius: 20px;
}
.box {
  height: 600px;
  width: 100%;
  border: 1px solid #000;
}
.box > span {
  border-bottom: 1px solid #000;
  height: 40px;
  display: flex;
  align-items: center;
  font-weight: 700;
}
.xinxi {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.but {
  background: none;
  color: #4eabfe;
}
.fj {
  width: 400px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
}
.fang {
  width: 800px;
}

.spans {
  font-size: 10px;
  margin-left: 20px;
}
.btn {
  background: #3985c8;
  color: white;
  width: 100px;
}
.but {
  border: 1px solid #000;
  color: #c9c3c3;
  width: 100px;
}
#but {
  float: right;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 170px;
  text-align: center;
  background: url(https://cdn7.axureshop.com/demo/1453833/images/%E8%AF%84%E5%88%86%E5%8D%A1/p1.jpg)
    no-repeat;
  background-size: 100%;
}
</style>